<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据差异报告</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .diff-highlight {
            background-color: #ffd54f !important;
            font-weight: bold;
        }
        .tab-content {
            padding: 20px;
            border: 1px solid #dee2e6;
            border-top: none;
            border-radius: 0 0 5px 5px;
        }
        .index-row {
            background-color: #e9ecef;
            font-weight: bold;
        }
        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .version-label {
            font-weight: bold;
            background-color: #f8f9fa;
        }
        .source-row {
            background-color: #e8f4f8;
        }
        .target-row {
            background-color: #e8f5e9;
        }
        .table-hover tbody tr:hover {
            background-color: rgba(0, 0, 0, 0.03);
        }
        .badge-summary {
            font-size: 1rem;
            padding: 0.5em 0.75em;
        }
        .summary-card {
            margin-bottom: 1.5rem;
        }
        .summary-stats {
            font-size: 1.1rem;
        }
        .page-size-selector {
            width: 80px;
            display: inline-block;
        }
        .modified-group {
            margin-bottom: 20px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            overflow: hidden;
        }
        .modified-group-header {
            background-color: #e9ecef;
            padding: 10px 15px;
            font-weight: bold;
        }
        .modified-group-body {
            padding: 0;
        }
    </style>
</head>
<body>
<div class="container mt-4 mb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="mb-0">数据差异报告</h1>
        <div class="text-end">
            <span class="badge bg-primary badge-summary">源数据: {{ stats.df1_rows }} 行</span>
            <span class="badge bg-primary badge-summary ms-2">目标数据: {{ stats.df2_rows }} 行</span>
        </div>
    </div>

    <!-- 摘要信息 -->
    <div class="card summary-card">
        <div class="card-header bg-primary text-white">
            <h2 class="h5 mb-0">摘要信息</h2>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h3 class="card-title text-success">{{ stats.total_added }}</h3>
                            <p class="card-text">新增行</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h3 class="card-title text-danger">{{ stats.total_deleted }}</h3>
                            <p class="card-text">删除行</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3">
                    <div class="card h-100">
                        <div class="card-body text-center">
                            <h3 class="card-title text-warning">{{ stats.total_modified }}</h3>
                            <p class="card-text">修改行</p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row mt-3">
                <div class="col-md-6">
                    <div class="summary-stats">
                        <p><strong>索引列:</strong> {{ stats.index_columns|join(', ') }}</p>
                        <p><strong>共同行数:</strong> {{ stats.common_rows }}</p>
                    </div>
                </div>
                <div class="col-md-6 text-end">
                    <p class="text-muted">仅显示最多1000行差异点</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签导航 -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="added-tab" data-bs-toggle="tab" data-bs-target="#added" type="button"
                    role="tab">
                新增行 <span class="badge bg-success ms-1">{{ stats.total_added }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="deleted-tab" data-bs-toggle="tab" data-bs-target="#deleted" type="button"
                    role="tab">
                删除行 <span class="badge bg-danger ms-1">{{ stats.total_deleted }}</span>
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="modified-tab" data-bs-toggle="tab" data-bs-target="#modified" type="button"
                    role="tab">
                修改行 <span class="badge bg-warning text-dark ms-1">{{ stats.total_modified }}</span>
            </button>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent">
        <!-- 新增行标签页 -->
        <div class="tab-pane fade show active" id="added" role="tabpanel">
            <h3 class="mb-3">新增行</h3>
            {% if stats.total_added > 0 %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                    <tr>
                        {% for col in columns %}
                        <th>{{ col }}</th>
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody id="added-data">
                    {% for page in added_pages %}
                    {% for row in page.data %}
                    <tr class="added-row" data-page="{{ page.number }}">
                        {% for col in columns %}
                        <td>{{ row[col] | default('', true) }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="pagination-container">
                <div class="text-muted">每页显示{{ page_size }}行，共{{ stats.total_added }}行</div>
                <nav>
                    <ul class="pagination" id="added-pagination">
                        {% for page in added_pages %}
                        <li class="page-item {% if page.active %}active{% endif %}">
                            <a class="page-link" href="#" data-page="{{ page.number }}">{{ page.number }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            {% else %}
            <div class="alert alert-info">无新增行</div>
            {% endif %}
        </div>

        <!-- 删除行标签页 -->
        <div class="tab-pane fade" id="deleted" role="tabpanel">
            <h3 class="mb-3">删除行</h3>
            {% if stats.total_deleted > 0 %}
            <div class="table-responsive">
                <table class="table table-striped table-hover">
                    <thead class="table-light">
                    <tr>
                        {% for col in columns %}
                        <th>{{ col }}</th>
                        {% endfor %}
                    </tr>
                    </thead>
                    <tbody id="deleted-data">
                    {% for page in deleted_pages %}
                    {% for row in page.data %}
                    <tr class="deleted-row" data-page="{{ page.number }}">
                        {% for col in columns %}
                        <td>{{ row[col] | default('', true) }}</td>
                        {% endfor %}
                    </tr>
                    {% endfor %}
                    {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="pagination-container">
                <div class="text-muted">每页显示{{ page_size }}行，共{{ stats.total_deleted }}行</div>
                <nav>
                    <ul class="pagination" id="deleted-pagination">
                        {% for page in deleted_pages %}
                        <li class="page-item {% if page.active %}active{% endif %}">
                            <a class="page-link" href="#" data-page="{{ page.number }}">{{ page.number }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            {% else %}
            <div class="alert alert-info">无删除行</div>
            {% endif %}
        </div>

        <!-- 修改行标签页 -->
        <div class="tab-pane fade" id="modified" role="tabpanel">
            <h3 class="mb-3">修改行</h3>
            {% if stats.total_modified > 0 %}
            <div class="alert alert-info">
                共发现 <strong>{{ stats.total_modified }}</strong> 行修改，以下显示修改详情。
                差异值已用<span class="diff-highlight p-1">黄色高亮</span>标记。
            </div>

            <div id="modified-data">
                {% for page in modified_pages %}
                {% for item in page.data %}
                <div class="modified-group mb-4" data-page="{{ page.number }}">
                    <div class="modified-group-header">
                        索引:
                        {% for key, value in item.index.items() %}
                        <span class="badge bg-info me-1">{{ key }} = {{ value }}</span>
                        {% endfor %}
                    </div>

                    <div class="modified-group-body">
                        <div class="table-responsive">
                            <table class="table table-bordered mb-0">
                                <thead class="table-light">
                                <tr>
                                    <th style="width: 120px;">版本</th>
                                    {% for col in columns %}
                                    <th>{{ col }}</th>
                                    {% endfor %}
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="source-row">
                                    <td class="version-label">源数据</td>
                                    {% for col in columns %}
                                    <td class="{% if col in item.changed_columns %}diff-highlight{% endif %}">
                                        {{ item.old[col] | default('', true) }}
                                    </td>
                                    {% endfor %}
                                </tr>
                                <tr class="target-row">
                                    <td class="version-label">目标数据</td>
                                    {% for col in columns %}
                                    <td class="{% if col in item.changed_columns %}diff-highlight{% endif %}">
                                        {{ item.new[col] | default('', true) }}
                                    </td>
                                    {% endfor %}
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                {% endfor %}
                {% endfor %}
            </div>

            <div class="pagination-container">
                <div class="text-muted">每页显示{{ page_size }}行修改，共{{ stats.total_modified }}行</div>
                <nav>
                    <ul class="pagination" id="modified-pagination">
                        {% for page in modified_pages %}
                        <li class="page-item {% if page.active %}active{% endif %}">
                            <a class="page-link" href="#" data-page="{{ page.number }}">{{ page.number }}</a>
                        </li>
                        {% endfor %}
                    </ul>
                </nav>
            </div>
            {% else %}
            <div class="alert alert-info">无修改行</div>
            {% endif %}
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 分页功能
    function setupPagination(tabId, rowClass, paginationId) {
        const pagination = document.getElementById(paginationId);
        if (!pagination) return;

        pagination.addEventListener('click', function(e) {
            e.preventDefault();
            const target = e.target.closest('.page-link');
            if (!target) return;

            // 更新活动页码
            pagination.querySelectorAll('.page-item').forEach(item => {
                item.classList.remove('active');
            });
            target.parentElement.classList.add('active');

            const page = target.dataset.page;

            // 显示/隐藏行
            const container = document.querySelector(`#${tabId} .tab-content`);
            container.querySelectorAll(`.${rowClass}`).forEach(row => {
                row.style.display = row.dataset.page === page ? '' : 'none';
            });
        });
    }

    // 初始化所有分页
    document.addEventListener('DOMContentLoaded', function() {
        // 设置初始显示第一页
        document.querySelectorAll('[data-page]').forEach(el => {
            el.style.display = el.dataset.page === '1' ? '' : 'none';
        });

        // 设置分页器
        setupPagination('added', 'added-row', 'added-pagination');
        setupPagination('deleted', 'deleted-row', 'deleted-pagination');
        setupPagination('modified', 'modified-group', 'modified-pagination');

        // 标签切换时重置为第一页
        document.querySelectorAll('[data-bs-toggle="tab"]').forEach(tab => {
            tab.addEventListener('shown.bs.tab', function() {
                const targetId = this.getAttribute('data-bs-target').substring(1);
                const pagination = document.querySelector(`#${targetId} .pagination`);
                if (!pagination) return;

                pagination.querySelectorAll('.page-item').forEach((item, index) => {
                    item.classList.toggle('active', index === 0);
                });

                document.querySelectorAll(`#${targetId} [data-page]`).forEach(el => {
                    el.style.display = el.dataset.page === '1' ? '' : 'none';
                });
            });
        });
    });
</script>
</body>
</html>